<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>残疾人就业岗位查询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles/readAloud.css">
    <script src="js/readAloud.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#334155',
                        'sky-light': '#F0F7FF',
                        'sky-medium': '#D6E8FF',
                        'sky-dark': '#94BFFF',
                        'border-light': '#E5EDFF',
                        'success': '#00B42A',
                        'warning': '#FF7D00',
                        'info': '#86909C',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 8px 24px rgba(22, 93, 255, 0.15)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.4s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .province-card {
                @apply bg-white rounded-xl border border-border-light p-2.5 text-center shadow-card transition-all duration-300 cursor-pointer;
            }
            .province-card:hover {
                @apply bg-sky-light shadow-card-hover transform scale-105;
            }
            .province-card.active {
                @apply bg-primary text-white border-primary;
            }
            .province-name {
                @apply font-medium text-neutral-dark text-sm;
            }
            .province-card.active .province-name {
                @apply text-white;
            }
            .search-container {
                @apply relative mb-6;
            }
            .search-input {
                @apply w-full px-4 py-3 rounded-xl border border-sky-light focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .search-icon {
                @apply absolute right-4 top-3.5 text-gray-400;
            }
            .job-card {
                @apply bg-white rounded-xl border border-border-light p-5 shadow-card transition-all duration-300 hover:shadow-card-hover mb-4 cursor-pointer;
            }
            .job-title {
                @apply font-semibold text-lg text-primary mb-1;
            }
            .job-company {
                @apply text-neutral-dark font-medium mb-2;
            }
            .job-info {
                @apply text-sm text-gray-500 flex flex-wrap gap-3 mb-3;
            }
            .job-salary {
                @apply text-success font-medium;
            }
            .fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }
            .slide-up {
                animation: slideUp 0.4s ease-out;
            }
            .no-jobs {
                @apply text-center py-12 text-gray-500;
            }
            .job-detail {
                @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300;
            }
            .job-detail.active {
                @apply opacity-100 pointer-events-auto;
            }
            .detail-content {
                @apply bg-white rounded-xl w-full max-w-2xl max-h-[90vh] overflow-auto transform translate-y-8 transition-transform duration-300;
            }
            .job-detail.active .detail-content {
                @apply translate-y-0;
            }
            .detail-header {
                @apply p-5 border-b border-border-light flex justify-between items-center;
            }
            .detail-body {
                @apply p-5;
            }
            .close-btn {
                @apply text-xl cursor-pointer text-gray-500 hover:text-red-500 transition-colors;
            }
        }
    </style>
</head>
<body class="bg-sky-light/30 min-h-screen">
<!-- 左上角返回按钮 -->
<a href="index.html" class="fixed top-4 left-4 z-10 flex items-center justify-center w-12 h-12 bg-white rounded-full shadow-md text-gray-600 hover:bg-gray-100 hover:text-blue-500 transition duration-300">
    <i class="fa fa-arrow-left fa-lg"></i>
</a>
<div class="container mx-auto px-4 py-8 max-w-5xl">
    <!-- 头部区域 -->
    <header class="mb-8 text-center">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary mb-2">
            <i class="fa fa-briefcase mr-2"></i>残疾人就业岗位查询
        </h1>
        <p class="text-gray-600 mb-6">根据省份查找适合的就业岗位</p>
    </header>

    <!-- 搜索框 -->
    <div class="search-container slide-up">
        <input type="text" id="searchInput" placeholder="搜索省份或岗位..."
               class="search-input" oninput="filterProvinces()">
        <i class="fa fa-search search-icon"></i>
    </div>

    <!-- 省份列表 -->
    <div id="provinceGrid" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 gap-3 mb-8">
        <!-- 省份卡片将通过JavaScript动态生成 -->
    </div>

    <!-- 岗位列表区域 -->
    <div id="jobsContainer" class="hidden mt-8">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-neutral-dark">
                <span id="selectedProvince">请选择省份</span> - 就业岗位
            </h2>
            <div class="flex gap-2">
                <button id="sortBySalary" class="text-sm px-3 py-1.5 rounded-full bg-white border border-border-light hover:bg-sky-light transition-colors">
                    <i class="fa fa-sort-numeric-asc mr-1"></i> 薪资排序
                </button>
                <button id="filterJobs" class="text-sm px-3 py-1.5 rounded-full bg-white border border-border-light hover:bg-sky-light transition-colors">
                    <i class="fa fa-filter mr-1"></i> 筛选
                </button>
            </div>
        </div>

        <div id="jobsList" class="space-y-4">
            <!-- 岗位卡片将通过JavaScript动态生成 -->
        </div>

        <div id="noJobsMessage" class="no-jobs hidden">
            <i class="fa fa-search text-gray-300 text-4xl mb-3"></i>
            <p>没有找到匹配的岗位</p>
            <p class="text-sm mt-2">请尝试选择其他省份或调整搜索条件</p>
        </div>
    </div>
</div>

<!-- 岗位详情模态框 -->
<div id="jobDetail" class="job-detail">
    <div class="detail-content">
        <div class="detail-header">
            <h3 id="detailTitle" class="text-lg font-bold text-primary"></h3>
            <span class="close-btn" onclick="closeJobDetail()">&times;</span>
        </div>
        <div class="detail-body">
            <div class="mb-4">
                <div class="flex flex-wrap items-center gap-3 mb-3">
                    <span id="detailCompany" class="font-medium text-neutral-dark"></span>
                    <span id="detailLocation" class="text-sm text-gray-500"><i class="fa fa-map-marker mr-1"></i></span>
                    <span id="detailSalary" class="text-success font-medium"></span>
                </div>
                <div class="flex flex-wrap gap-2 mb-4">
                    <!-- 标签将通过JavaScript动态生成 -->
                </div>
            </div>

            <div class="mb-6">
                <h4 class="font-medium text-neutral-dark mb-2">职位描述</h4>
                <div id="detailDescription" class="text-gray-600 leading-relaxed"></div>
            </div>

            <div class="mb-6">
                <h4 class="font-medium text-neutral-dark mb-2">任职要求</h4>
                <div id="detailRequirements" class="text-gray-600 leading-relaxed"></div>
            </div>

            <div class="mb-6">
                <h4 class="font-medium text-neutral-dark mb-2">福利待遇</h4>
                <div id="detailBenefits" class="text-gray-600 leading-relaxed"></div>
            </div>

            <div class="flex justify-center mt-8">
                <button class="px-6 py-3 bg-primary text-white rounded-xl hover:bg-primary/90 transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all">
                    <i class="fa fa-paper-plane mr-2"></i>申请职位
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // 所有省份列表
    const provinces = [
        "北京市", "天津市", "河北省", "山西省", "内蒙古自治区",
        "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省",
        "浙江省", "安徽省", "福建省", "江西省", "山东省",
        "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区",
        "海南省", "重庆市", "四川省", "贵州省", "云南省",
        "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区",
        "新疆维吾尔自治区"
    ];

    // 模拟岗位数据 - 实际应用中应从服务器获取
    const mockJobsData = {
        "北京市": [
            {
                id: 1,
                title: "UI设计师（可远程）",
                company: "智慧科技有限公司",
                location: "北京市海淀区",
                salary: "10K-15K",
                tags: ["设计", "远程", "轻度肢体残疾"],
                description: "我们正在寻找一位有创意的UI设计师，负责公司产品的界面设计工作。需要熟练掌握Figma、Adobe系列软件，有良好的审美能力和沟通能力。",
                requirements: "1. 大专及以上学历，设计相关专业；\n2. 有1年以上UI设计工作经验；\n3. 轻度肢体残疾，能够正常使用电脑；\n4. 具备良好的团队合作精神。",
                benefits: "五险一金、带薪年假、定期体检、节日福利、远程办公"
            },
            {
                id: 2,
                title: "客服专员",
                company: "安心服务有限公司",
                location: "北京市朝阳区",
                salary: "6K-8K",
                tags: ["客服", "坐班", "听力障碍"],
                description: "负责接听客户咨询电话，解决客户问题，记录客户反馈。需要有良好的沟通能力和服务意识。",
                requirements: "1. 高中及以上学历；\n2. 有客服工作经验优先；\n3. 听力障碍者需能够熟练使用手语或文字沟通；\n4. 工作认真负责，有耐心。",
                benefits: "五险一金、绩效奖金、节日福利、晋升空间"
            }
        ],
        "上海市": [
            {
                id: 3,
                title: "数据录入员",
                company: "信息科技有限公司",
                location: "上海市浦东新区",
                salary: "5K-7K",
                tags: ["数据处理", "坐班", "视力障碍"],
                description: "负责将纸质文档和电子文档中的数据录入到系统中，进行数据整理和校对工作。需要有良好的细心和耐心。",
                requirements: "1. 中专及以上学历；\n2. 熟练使用Excel等办公软件；\n3. 视力障碍者需能够使用读屏软件；\n4. 工作认真仔细，有良好的数据处理能力。",
                benefits: "五险一金、加班补贴、定期培训"
            },
            {
                id: 4,
                title: "电商运营助理",
                company: "网络科技有限公司",
                location: "上海市静安区",
                salary: "7K-10K",
                tags: ["电商", "运营", "肢体残疾"],
                description: "协助电商运营经理进行店铺日常运营工作，包括商品上架、订单处理、客户反馈处理等。需要有良好的学习能力和责任心。",
                requirements: "1. 大专及以上学历；\n2. 有电商运营相关经验优先；\n3. 肢体残疾但不影响基本办公操作；\n4. 熟悉电商平台规则和操作流程。",
                benefits: "五险一金、年终奖、节日福利、弹性工作"
            }
        ],
        "广东省": [
            {
                id: 5,
                title: "新媒体运营",
                company: "创意传媒有限公司",
                location: "广州市天河区",
                salary: "8K-12K",
                tags: ["新媒体", "文案", "语言表达", "轻度肢体残疾"],
                description: "负责公司新媒体平台的内容策划、编辑和发布，提高品牌知名度和影响力。需要有良好的文字功底和创意能力。",
                requirements: "1. 本科及以上学历，新闻、传播等相关专业；\n2. 有新媒体运营工作经验；\n3. 轻度肢体残疾，不影响日常办公；\n4. 熟悉各种新媒体平台的运营规则。",
                benefits: "五险一金、绩效奖金、年终分红、员工旅游"
            },
            {
                id: 6,
                title: "平面设计师",
                company: "视觉艺术工作室",
                location: "深圳市南山区",
                salary: "9K-14K",
                tags: ["设计", "创意", "坐班", "肢体残疾"],
                description: "负责公司品牌形象设计、宣传物料设计等工作。需要有丰富的创意和扎实的设计功底。",
                requirements: "1. 大专及以上学历，设计相关专业；\n2. 有2年以上平面设计工作经验；\n3. 肢体残疾但不影响使用设计软件；\n4. 熟练掌握Adobe Photoshop、Illustrator等设计软件。",
                benefits: "五险一金、项目奖金、灵活工作时间"
            }
        ],
        "江苏省": [
            {
                id: 7,
                title: "网络客服",
                company: "服务外包有限公司",
                location: "南京市玄武区",
                salary: "5K-7K",
                tags: ["客服", "线上", "听力障碍"],
                description: "通过在线聊天工具为客户提供咨询和服务，解决客户问题。需要有良好的沟通能力和服务意识。",
                requirements: "1. 高中及以上学历；\n2. 有客服工作经验优先；\n3. 听力障碍者需能够熟练使用文字沟通；\n4. 打字速度快，有良好的应变能力。",
                benefits: "五险一金、绩效奖金、节日福利"
            },
            {
                id: 8,
                title: "仓库管理员",
                company: "物流有限公司",
                location: "苏州市姑苏区",
                salary: "6K-9K",
                tags: ["物流", "仓库", "轻度肢体残疾"],
                description: "负责仓库货物的收发、整理和盘点工作，确保库存数据准确无误。需要有良好的责任心和团队合作精神。",
                requirements: "1. 初中及以上学历；\n2. 有仓库管理工作经验优先；\n3. 轻度肢体残疾，能够进行简单的体力劳动；\n4. 工作认真负责，能吃苦耐劳。",
                benefits: "五险一金、加班补贴、提供住宿"
            }
        ],
        "浙江省": [
            {
                id: 9,
                title: "软件测试员",
                company: "软件开发有限公司",
                location: "杭州市西湖区",
                salary: "8K-13K",
                tags: ["技术", "测试", "坐班", "肢体残疾"],
                description: "负责公司软件产品的测试工作，发现和记录软件缺陷，确保产品质量。需要有良好的逻辑思维能力和责任心。",
                requirements: "1. 大专及以上学历，计算机相关专业；\n2. 有软件测试工作经验优先；\n3. 肢体残疾但不影响键盘鼠标操作；\n4. 熟悉软件测试流程和方法。",
                benefits: "五险一金、年终奖、节日福利、定期培训"
            },
            {
                id: 10,
                title: "会计",
                company: "财务咨询有限公司",
                location: "宁波市鄞州区",
                salary: "7K-10K",
                tags: ["财务", "坐班", "视力障碍"],
                description: "负责公司的账务处理、税务申报等财务工作。需要有扎实的财务知识和丰富的经验。",
                requirements: "1. 本科及以上学历，财务相关专业；\n2. 有会计从业资格证书；\n3. 视力障碍者需能够使用财务软件和读屏软件；\n4. 工作认真细致，有良好的职业道德。",
                benefits: "五险一金、年终奖、节日福利、晋升空间"
            }
        ]
    };

    // 缓存DOM元素
    const provinceGrid = document.getElementById('provinceGrid');
    const jobsContainer = document.getElementById('jobsContainer');
    const jobsList = document.getElementById('jobsList');
    const noJobsMessage = document.getElementById('noJobsMessage');
    const selectedProvince = document.getElementById('selectedProvince');
    const searchInput = document.getElementById('searchInput');
    const sortBySalaryBtn = document.getElementById('sortBySalary');
    const filterJobsBtn = document.getElementById('filterJobs');
    const jobDetail = document.getElementById('jobDetail');
    const detailTitle = document.getElementById('detailTitle');
    const detailCompany = document.getElementById('detailCompany');
    const detailLocation = document.getElementById('detailLocation');
    const detailSalary = document.getElementById('detailSalary');
    const detailDescription = document.getElementById('detailDescription');
    const detailRequirements = document.getElementById('detailRequirements');
    const detailBenefits = document.getElementById('detailBenefits');

    // 当前选中的省份
    let currentProvince = null;
    // 当前显示的岗位列表
    let currentJobs = [];
    // 筛选状态
    let filterState = {
        salaryRange: 'all',
        disabilityType: 'all'
    };

    // 初始化省份列表
    function initProvinceList() {
        provinceGrid.innerHTML = '';
        provinces.forEach(province => {
            const card = document.createElement('div');
            card.className = 'province-card';
            card.innerHTML = `
                <div class="province-name">${province}</div>
            `;
            card.addEventListener('click', () => selectProvince(province));
            provinceGrid.appendChild(card);
        });
    }

    // 选择省份
    function selectProvince(province) {
        // 移除之前选中的省份样式
        const prevSelectedCard = provinceGrid.querySelector('.province-card.active');
        if (prevSelectedCard) {
            prevSelectedCard.classList.remove('active');
        }

        // 添加当前选中省份样式
        const cards = provinceGrid.querySelectorAll('.province-card');
        cards.forEach(card => {
            if (card.querySelector('.province-name').textContent === province) {
                card.classList.add('active');
            }
        });

        // 更新当前省份
        currentProvince = province;
        selectedProvince.textContent = province;

        // 显示岗位列表容器
        jobsContainer.classList.remove('hidden');
        jobsContainer.scrollIntoView({ behavior: 'smooth' });

        // 加载并显示岗位
        loadJobs(province);
    }

    // 加载并显示岗位
    function loadJobs(province) {
        // 显示加载状态
        jobsList.innerHTML = `
            <div class="text-center py-8">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-sky-light border-t-primary mb-3"></div>
                <p class="text-gray-500">正在加载岗位信息...</p>
            </div>
        `;
        noJobsMessage.classList.add('hidden');

        // 模拟加载延迟
        setTimeout(() => {
            // 从模拟数据中获取岗位
            currentJobs = mockJobsData[province] || [];

            // 应用筛选
            const filteredJobs = filterJobs(currentJobs);

            // 显示岗位或无结果消息
            if (filteredJobs.length > 0) {
                displayJobs(filteredJobs);
            } else {
                jobsList.innerHTML = '';
                noJobsMessage.classList.remove('hidden');
            }
        }, 800);
    }

    // 显示岗位列表
    function displayJobs(jobs) {
        jobsList.innerHTML = '';
        jobs.forEach(job => {
            const card = document.createElement('div');
            card.className = 'job-card';
            card.innerHTML = `
                <div class="job-title">${job.title}</div>
                <div class="job-company">${job.company}</div>
                <div class="job-info">
                    <span><i class="fa fa-map-marker mr-1"></i>${job.location}</span>
                    <span class="job-salary"><i class="fa fa-money mr-1"></i>${job.salary}</span>
                    <div class="flex flex-wrap gap-1">
                        ${job.tags.map(tag => `<span class="text-xs bg-sky-light text-primary px-2 py-0.5 rounded-full">${tag}</span>`).join('')}
                    </div>
                </div>
            `;
            card.addEventListener('click', () => showJobDetail(job));
            jobsList.appendChild(card);
        });
    }

    // 显示岗位详情
    function showJobDetail(job) {
        detailTitle.textContent = job.title;
        detailCompany.textContent = job.company;
        detailLocation.textContent = job.location;
        detailSalary.textContent = job.salary;

        // 设置标签
        const tagsContainer = detailBody.querySelector('.flex.flex-wrap.gap-2');
        tagsContainer.innerHTML = '';
        job.tags.forEach(tag => {
            const tagElement = document.createElement('span');
            tagElement.className = 'text-xs bg-sky-light text-primary px-2.5 py-1 rounded-full';
            tagElement.textContent = tag;
            tagsContainer.appendChild(tagElement);
        });

        // 设置详情内容
        detailDescription.textContent = job.description;
        detailRequirements.textContent = job.requirements;
        detailBenefits.textContent = job.benefits;

        // 显示详情模态框
        jobDetail.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    // 关闭岗位详情
    function closeJobDetail() {
        jobDetail.classList.remove('active');
        document.body.style.overflow = '';
    }

    // 搜索过滤功能
    function filterProvinces() {
        const searchTerm = searchInput.value.toLowerCase();

        // 同时过滤省份和岗位（如果已选择省份）
        if (!currentProvince) {
            // 过滤省份
            const provinceCards = provinceGrid.querySelectorAll('.province-card');
            provinceCards.forEach((card, index) => {
                const provinceName = provinces[index].toLowerCase();
                const match = provinceName.includes(searchTerm);

                // 动画效果
                card.style.transition = 'all 0.3s ease-out';
                card.style.opacity = match ? '1' : '0';
                card.style.transform = match ? 'scale(1)' : 'scale(0.9)';

                setTimeout(() => {
                    card.style.display = match ? 'block' : 'none';
                }, 300);
            });
        } else {
            // 过滤岗位
            if (currentJobs && currentJobs.length > 0) {
                const filteredJobs = currentJobs.filter(job =>
                    job.title.toLowerCase().includes(searchTerm) ||
                    job.company.toLowerCase().includes(searchTerm) ||
                    job.tags.some(tag => tag.toLowerCase().includes(searchTerm))
                );

                if (filteredJobs.length > 0) {
                    displayJobs(filteredJobs);
                    noJobsMessage.classList.add('hidden');
                } else {
                    jobsList.innerHTML = '';
                    noJobsMessage.classList.remove('hidden');
                }
            }
        }
    }

    // 应用筛选条件
    function filterJobs(jobs) {
        let filtered = [...jobs];

        // 薪资范围筛选
        if (filterState.salaryRange !== 'all') {
            const [min, max] = filterState.salaryRange.split('-').map(Number);
            filtered = filtered.filter(job => {
                const salaryText = job.salary.replace(/[^\d-]/g, '');
                const [jobMin, jobMax] = salaryText.split('-').map(Number);
                return (jobMin >= min && jobMin <= max) || (jobMax >= min && jobMax <= max);
            });
        }

        // 残疾类型筛选
        if (filterState.disabilityType !== 'all') {
            filtered = filtered.filter(job =>
                job.tags.some(tag => tag.includes(filterState.disabilityType))
            );
        }

        return filtered;
    }

    // 薪资排序
    function sortJobsBySalary() {
        if (currentJobs && currentJobs.length > 0) {
            const sortedJobs = [...currentJobs].sort((a, b) => {
                const aMin = parseInt(a.salary.replace(/[^\d-]/g, '').split('-')[0]);
                const bMin = parseInt(b.salary.replace(/[^\d-]/g, '').split('-')[0]);
                return aMin - bMin;
            });

            displayJobs(sortedJobs);
        }
    }

    // 筛选功能
    function showFilterModal() {
        // 这里应该显示一个筛选模态框
        // 简化实现，直接切换筛选状态
        alert('筛选功能暂未完全实现，敬请期待！');
    }

    // 初始化事件监听
    function initEventListeners() {
        // 搜索输入框事件
        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                filterProvinces();
            }
        });

        // 薪资排序按钮事件
        sortBySalaryBtn.addEventListener('click', sortJobsBySalary);

        // 筛选按钮事件
        filterJobsBtn.addEventListener('click', showFilterModal);

        // 点击模态框外部关闭
        jobDetail.addEventListener('click', (e) => {
            if (e.target === jobDetail) {
                closeJobDetail();
            }
        });
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
        initProvinceList();
        initEventListeners();

        // 添加页面载入动画
        setTimeout(() => {
            document.body.classList.add('loaded');
        }, 300);
    });
</script>
</body>
</html>
